<template>
  <div class="content" style="backgroud-color:none;">
    <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
                                            <el-tab-pane label="学员基本资料" name="first"></el-tab-pane>
                                            <el-tab-pane label="学员表达课程" name="second"></el-tab-pane>
                                          </el-tabs> -->
  
    <!--学员信息展示  -->
    <el-form ref="form" :model="studentInfo" label-width="80px" style="max-width:800px;margin: 40px auto;padding: 40px;box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.25)">
      <div id="student-detail">
        <p style="font-size:20px;padding-left: 40px;text-align:center;">学员基本信息</p>
        <el-row :gutter="gutter">
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item :label="getLabel(studentInfo.name)">
                <el-input v-model="studentInfo.name.value"></el-input>
              </el-form-item>
  
              <el-form-item :label="getLabel(studentInfo.sex)">
                <el-select v-model="studentInfo.sex.value" placeholder="请选择性别">
                  <el-option label="男" value="0"></el-option>
                  <el-option label="女" value="1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item :label="getLabel(studentInfo.birthday)">
                <el-date-picker v-model="studentInfo.birthday.value" :default-value="new Date('1988-08-08')" type="date" placeholder="选择生日日期" :picker-options="pickerBirthday">
                </el-date-picker>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12" style="height:160px;display: inline-block;text-align: center;">
            <el-upload class="avatar-uploader" :action="uploadImgUrl" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
              <img v-if="studentInfo.head_url.value" :src="studentInfo.head_url.value" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-col>
        </el-row>
  
        <el-row :gutter="gutter">
          <el-col :span="12">
            <el-form-item :label="getLabel(studentInfo.phone)">
              <el-input v-model="studentInfo.phone.value"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="getLabel(studentInfo.marriage)">
              <el-select v-model="studentInfo.marriage.value" placeholder="请选择婚姻状况">
                <el-option label="未婚" value="0"></el-option>
                <el-option label="已婚" value="1"></el-option>
                <el-option label="离异" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
  
        <el-row :gutter="gutter">
          <el-col :span="12">
            <el-form-item :label="getLabel(studentInfo.school)">
              <el-input v-model="studentInfo.school.value"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="getLabel(studentInfo.edu_level)">
              <el-select v-model="studentInfo.edu_level.value" placeholder="请选择学历">
                <el-option label="高中及以下" value="0"></el-option>
                <el-option label="大专" value="1"></el-option>
                <el-option label="本科" value="2"></el-option>
                <el-option label="硕士" value="3"></el-option>
                <el-option label="博士" value="4"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
  
        <el-row :gutter="gutter">
          <el-col :span="12">
            <el-form-item :label="getLabel(studentInfo.height)">
              <el-input v-model="studentInfo.height.value">
                <template slot="append">CM</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="getLabel(studentInfo.weight)">
              <el-input v-model="studentInfo.weight.value">
                <template slot="append">KG</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
  
        <el-row :gutter="gutter">
          <el-col :span="12">
            <el-form-item :label="getLabel(studentInfo.nation)">
              <el-input v-model="studentInfo.nation.value"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="getLabel(studentInfo.native_place)">
              <el-input v-model="studentInfo.native_place.value"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <p style="font-size:20px;text-align:center">工作相关</p>
        <el-row :gutter="gutter">
          <el-col :span="12">
            <el-form-item :label="getLabel(studentInfo.hope_work)">
              <el-input placeholder="请输入您的期望工作" :rows="4" v-model="studentInfo.hope_work.value"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="gutter">
          <el-col :span="12">
            <el-form-item :label="getLabel(studentInfo.now_salary)">
              <el-select v-model="studentInfo.now_salary.value" placeholder="请选择薪资区间">
                <el-option label="4000及以下" value="0"></el-option>
                <el-option label="4001-6000" value="1"></el-option>
                <el-option label="6001-8000" value="2"></el-option>
                <el-option label="8001-10000" value="3"></el-option>
                <el-option label="10001-15000" value="4"></el-option>
                <el-option label="15000以上" value="5"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="getLabel(studentInfo.hope_salary)">
              <el-select v-model="studentInfo.hope_salary.value" placeholder="请选择薪资区间">
                <el-option label="4000及以下" value="0"></el-option>
                <el-option label="4001-6000" value="1"></el-option>
                <el-option label="6001-8000" value="2"></el-option>
                <el-option label="8001-10000" value="3"></el-option>
                <el-option label="10001-15000" value="4"></el-option>
                <el-option label="15000以上" value="5"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
  
        <el-row :gutter="gutter">
          <el-col :span="24">
            <div class="grid-content bg-purple">
              <el-form-item :label="getLabel(studentInfo.experience)">
                <el-input type="textarea" placeholder="请输入您的工作经历" :rows="6" v-model="studentInfo.experience.value"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
  
        <el-row :gutter="gutter">
          <el-col :span="24">
            <div class="grid-content bg-purple">
              <el-form-item :label="getLabel(studentInfo.interest)">
                <el-input type="textarea" placeholder="请输入您的兴趣爱好" :rows="4" v-model="studentInfo.interest.value"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
  
        <el-row :gutter="gutter">
          <el-col :span="24">
            <div class="grid-content bg-purple">
              <el-form-item :label="getLabel(studentInfo.evaluation)">
                <el-input type="textarea" placeholder="请输入您的自我评价" :rows="4" v-model="studentInfo.evaluation.value"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="gutter">
          <el-form-item>
            <el-button type="primary" @click="onSave">保存</el-button>
            <el-button @click="onReset">重置</el-button>
          </el-form-item>
        </el-row>
      </div>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { uploadImgUrl } from '../../config';
import {fetchStudentInfo } from "api/remoteSearch"
export default {
  data() {
    return {
      uploadImgUrl:uploadImgUrl,
      gutter: 20,
      pickerBirthday: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      studentInfo: {
        id: { value: '', need: false, name: '', reg: /.*/, regTip: "" },
        head_url: { value: '', need: true, name: '头像', reg: /.*/ },
        name: { value: '', need: true, name: '姓名', reg: /^[0-9\u4e00-\u9fa5]{2,4}$/, regTip: "合法的姓名为2-4个中文" },
        sex: { value: '', need: true, name: '性别', reg: /.*/ },
        birthday: { value: '', need: true, name: '出生日期', reg: /.*/ },
        phone: { value: '', need: true, name: '手机', reg: /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/,regTip:"请输入合法的手机号" },
        edu_level: { value: '', need: true, name: '学历', reg: /.*/ },
        school: { value: '', need: true, name: '毕业院校', reg: /.*/ },
        weight: { value: '', need: false, name: '体重', reg: /\d{2,3}/,regTip:"请输入合法的体重" },
        height: { value: '', need: true, name: '身高', reg: /^[1,2]\d{2,2}$/,regTip:"请输入合法的身高" },
        nation: { value: '', need: false, name: '民族', reg: /.*/ },
        native_place: { value: '', need: false, name: '籍贯', reg: /.*/ },
        now_salary: { value: '', need: true, name: '当前薪资', reg: /.*/ },
        hope_salary: { value: '', need: true, name: '期望薪资', reg: /.*/ },
        hope_work: { value: '', need: true, name: '工作期望', reg: /.*/ },
        marriage: { value: '', need: false, name: '婚姻状况', reg: /.*/ },
        experience: { value: '', need: true, name: '工作经验', reg: /.{20,}/ ,regTip:"工作经验最少20个字符"},
        interest: { value: '', need: false, name: '个人兴趣',reg: /.*/},
        evaluation: { value: '', need: false, name: '自我评价',reg: /.*/}
      },
      activeName: 'first'
    };
  },
    computed: {
    ...mapGetters([
      'user_id',
      'roles'
    ])
  },
  mounted(){
    this.fetchStudentDetail();
  },
  methods: {
    fetchStudentDetail(){
      let vm=this;
      //获取学生资料
      fetchStudentInfo(vm.user_id)
      .then(res=>{
        if(res.data.status=='success'){
          for (var key in vm.studentInfo) {
             vm.studentInfo[key].value=res.data.studentInfo[key]
          }
        }
      })
    },
    getLabel(obj) {
      return obj.name + (obj.need ? '*' : '');
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleAvatarSuccess(res, file) {
      console.log(res)
      if (res.status == "success") {
        if (res.data.length > 0) {
          this.studentInfo.head_url.value = res.data[0].url;
          return;
        }
      }
      this.$message.error("上传头像失败!");
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jepg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 jpg或png 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    onSave() {
      let vm = this;
      //数据检验
      for (var key in vm.studentInfo) {
        if (vm.studentInfo.hasOwnProperty(key)) {
          var element = vm.studentInfo[key];
          //为空但是需要的
          if (element.need && element.value.length == 0) {
            vm.$message({
              type: 'error',
              message: element.name + "为必填项"
            });
            return;
          }else if(element.need &&!element.reg.test(element.value)){
            vm.$message({
              type: 'error',
              message: element.regTip
            });
            return;
          }
        }
      }
      //组装数据
      let userInfo={}
      userInfo['user_id']=vm.user_id;
      for (var key in vm.studentInfo) {
        console.log(key)
        console.log(vm.studentInfo[key])
        if(vm.studentInfo[key].value.length!=0){
          userInfo[key]=vm.studentInfo[key]['value'];
        }
      }
      //保存用户信息
      
      vm.axios.post(vm.url.acid + "&do=saveStudent", userInfo, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
        .then(function (res) {
          vm.$message({
            type: res.data.status,
            message: res.data.msg
          });
        })
        .catch(function (err) {
          vm.$message({
            type: 'error',
            message: '保存失败'
          });
        });

    },
    onReset() {
      let vm = this;
      this.$confirm('是否重置所有信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let studentInfo = vm.studentInfo;
        //  this.$message
        for (let key in studentInfo) {
          if (studentInfo.hasOwnProperty(key)) {
            studentInfo[key]['value'] = '';
          }
        }
        this.$message({
          type: 'success',
          message: '重置成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消重置'
        });
      });

    }
  }
}
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 160px;
  line-height: 160px;
  text-align: center;
}

.avatar {
  width: 120px;
  height: 160px;
  display: block;
}
</style>

<style>

</style>
